<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>音乐播放器</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "微软雅黑";
        font-size: 14px;
      }
      ul {
        list-style: none;
      }
      #container {
        width: 740px;
        height: 300px;
        margin: 20px auto;
      }
      #header {
        width: 740px;
        height: 40px;
        margin-bottom: 10px;
        background-color: #383838;
        line-height: 40px;
        box-shadow: 0 0 10px #333;
      }
      /*播放按钮开始*/
      #header .controls {
        float: left;
        width: 100px;
        height: 40px;
        margin-left: 10px;
      }
      #header .controls .prev,
      #header .controls .switch,
      #header .controls .next {
        float: left;
      }
      #header .controls .control {
        background-image: url("image/sk-dark.png");
        background-repeat: no-repeat;
        cursor: pointer;
      }
      #header .controls .prev {
        width: 20px;
        height: 40px;
        background-position: 0 4px;
      }
      #header .controls .prev:hover {
        background-position: 0 -28px;
      }
      #header .controls .switch {
        overflow: hidden;
        width: 30px;
        height: 40px;
        margin-left: 10px;
      }
      #header .controls .pause {
        width: 30px;
        height: 40px;
        /*margin-top:-40px;*/
        background-position: -50px -128px;
      }
      #header .controls .pause:hover {
        background-position: -50px -163px;
      }
      #header .controls .play {
        width: 30px;
        height: 40px;
        background-position: -84px -128px;
      }
      #header .controls .play:hover {
        background-position: -84px -164px;
      }
      #header .controls .next {
        width: 20px;
        height: 40px;
        margin-left: 10px;
        background-position: 0 -60px;
      }
      #header .controls .next:hover {
        background-position: 0 -92px;
      }
      /*播放按钮结束*/

      /*播放进度条开始*/
      #header .progress {
        float: left;
        width: 320px;
        height: 40px;
        margin-left: 10px;
      }
      #header .progress .progress-top {
        width: 100%;
        height: 17px;
        margin-top: 3px;
        color: #fff;
        line-height: 20px;
      }
      #header .progress .progress-top p.name {
        float: left;
        height: 17px;
        line-height: 20px;
      }
      #header .progress .progress-top p.time {
        float: right;
        height: 17px;
      }
      #header .progress .progress-bottom {
        position: relative;
        width: 320px;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
      }
      #header .progress .progress-bottom .bg-bar {
        position: absolute;
        top: 8px;
        left: 0;
        width: 320px;
        height: 4px;
        background-color: #000;
      }
      #header .progress .progress-bottom .bar {
        position: absolute;
        top: 8px;
        left: 0;
        width: 10px;
        height: 4px;
        background-color: #fff;
      }
      /*播放进度条结束*/

      /*播放模式开始*/
      #header .mode {
        float: left;
        width: 80px;
        margin-left: 20px;
        color: #5d6d79;
        font-weight: bold;
      }
      #header .mode p {
        float: left;
        width: 35px;
        cursor: pointer;
      }
      #header .mode p.selected {
        color: #d58ba7;
        font-size: 16px;
      }
      #header .mode p:hover {
        color: #d58ba7;
        font-size: 15px;
      }
      #header .mode p.random {
        margin-left: 5px;
      }
      /*播放模式结束*/
      /*音量开始*/
      #header .volume {
        float: left;
        width: 150px;
        height: 20px;
        margin-top: 10px;
        line-height: 20px;
      }
      #header .volume .min,
      #header .volume .max {
        float: left;
        width: 20px;
        height: 20px;
        background-image: url("image/sk-dark.png");
        background-repeat: no-repeat;
        cursor: pointer;
      }
      #header .volume .min {
        background-position: -26px -190px;
      }
      #header .volume .min:hover {
        background-position: -26px -222px;
      }
      #header .volume .max {
        margin-left: 5px;
        background-position: -26px -127px;
      }
      #header .volume .max:hover {
        background-position: -26px -159px;
      }
      #header .volume .volume-control {
        position: relative;
        float: left;
        width: 100px;
        height: 20px;
        margin-left: 5px;
        line-height: 20px;
        cursor: pointer;
      }
      #header .volume .volume-bg {
        position: absolute;
        top: 8px;
        width: 100px;
        height: 4px;
        background-color: #000;
      }
      #header .volume .volume-bar {
        position: absolute;
        top: 8px;
        width: 50px;
        height: 4px;
        background-color: #fff;
      }
      /*音量结束*/
      /*播放列表折叠按钮开始*/
      #header .fold {
        float: left;
        overflow: hidden;
        width: 30px;
        height: 30px;
        margin-top: 5px;
        margin-left: 10px;
        cursor: pointer;
      }
      #header .fold .close {
        width: 30px;
        height: 30px;
        /*margin-top:-30px;*/
        background-image: url("image/sk-dark.png");
        background-repeat: no-repeat;
        background-position: -20px 0;
      }
      #header .fold .close:hover {
        background-position: -20px -29px;
      }
      #header .fold .open {
        width: 30px;
        height: 30px;
        background-image: url("image/sk-dark.png");
        background-repeat: no-repeat;
        background-position: -20px -248px;
      }
      #header .fold .open:hover {
        background-position: -20px -278px;
      }
      /*播放列表折叠按钮结束*/
      /*图片列表容器开始*/
      #content {
        width: 720px;
        height: 250px;
        padding: 10px;
        background-color: #383838;
        box-shadow: 0 0 10px #333;
      }
      /*图片列表容器结束*/
      /*图片开始*/
      #content ul.pic {
        position: relative;
        float: left;
        width: 260px;
        height: 250px;
      }
      #content ul.pic li {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 260px;
        height: 250px;
      }
      #content ul.pic li img {
        width: 260px;
        height: 250px;
      }
      #content ul.pic li.current {
        display: block;
      }
      /*图片结束*/
      /*歌曲列表开始*/
      #content ul.songname {
        position: relative;
        float: left;
        width: 440px;
        height: 250px;
        margin-left: 20px;
        color: #fff;
      }
      #content ul.songname li {
        height: 25px;
        margin-bottom: 3px;
        line-height: 25px;
        text-indent: 10px;
        cursor: pointer;
      }
      #content ul.songname li:not(.active):hover {
        background-color: rgba(0, 0, 0, 0.3);
      }
      #content ul.songname li.active {
        background-color: rgba(0, 0, 0, 0.3);
        color: #d58ba7;
      }
      /*歌曲列表结束*/
      /*音符开始*/
      #content ul.songname .music {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 25px;
      }
      #content ul.songname .music i {
        position: absolute;
        bottom: 0;
        width: 3px;
        height: 5px;
        background-color: #d58ba7;
      }
      #content ul.songname .music i:nth-of-type(1) {
        left: 0;
      }
      #content ul.songname .music i:nth-of-type(2) {
        left: 8px;
      }
      #content ul.songname .music i:nth-of-type(3) {
        left: 16px;
      }
      #content ul.songname .music i:nth-of-type(4) {
        left: 24px;
      }
      #content ul.songname .music i:nth-of-type(5) {
        left: 32px;
      }
      #content ul.songname .music i:nth-of-type(6) {
        left: 40px;
      }
      #content ul.songname .music.actived i:nth-of-type(1) {
        animation: wave 0.66s linear infinite;
      }
      #content ul.songname .music.actived i:nth-of-type(2) {
        animation: wave 0.8s linear infinite;
      }
      #content ul.songname .music.actived i:nth-of-type(3) {
        animation: wave 0.7s linear infinite;
      }
      #content ul.songname .music.actived i:nth-of-type(4) {
        animation: wave 0.5s linear infinite;
      }
      #content ul.songname .music.actived i:nth-of-type(5) {
        animation: wave 0.9s linear infinite;
      }
      #content ul.songname .music.actived i:nth-of-type(6) {
        animation: wave 1.2s linear infinite;
      }
      @keyframes wave {
        0% {
          height: 5px;
        }
        50% {
          height: 18px;
        }
        100% {
          height: 10px;
        }
      }
      /*音符结束*/
    </style>
  </head>
  <body>
    <audio
      id="myaudio"
      src="music/阿悄-如果说离别.mp3"
      autoplay="autoplay"
    ></audio>
    <div id="container">
      <header id="header">
        <div class="controls">
          <div class="prev control"></div>
          <div class="switch">
            <div class="pause control"></div>
            <div class="play control"></div>
          </div>
          <div class="next control"></div>
        </div>
        <div class="progress">
          <div class="progress-top">
            <p class="name">阿悄-如果说离别</p>
            <p class="time"></p>
          </div>
          <div class="progress-bottom">
            <div class="bg-bar"></div>
            <div class="bar"></div>
          </div>
        </div>
        <div class="mode">
          <p class="single">单曲</p>
          <p class="random">随机</p>
        </div>
        <div class="volume">
          <div class="min"></div>
          <div class="volume-control">
            <div class="volume-bg"></div>
            <div class="volume-bar"></div>
          </div>
          <div class="max"></div>
        </div>
        <div class="fold">
          <div class="close"></div>
          <div class="open"></div>
        </div>
      </header>
      <section id="content">
        <ul class="pic">
          <li class="current"><img src="image/1.jpg" alt="" /></li>
          <li><img src="image/2.jpg" alt="" /></li>
          <li><img src="image/3.jpg" alt="" /></li>
          <li><img src="image/4.jpg" alt="" /></li>
          <li><img src="image/5.jpg" alt="" /></li>
          <li><img src="image/6.jpg" alt="" /></li>
          <li><img src="image/7.jpg" alt="" /></li>
          <li><img src="image/8.jpg" alt="" /></li>
          <li><img src="image/9.jpg" alt="" /></li>
        </ul>
        <ul class="songname">
          <li class="active">01. 阿悄-如果说离别</li>
          <li>02. 爱与诺言</li>
          <li>03. 北京北京</li>
          <li>04. 陈瑞-白狐</li>
          <li>05. 感恩的心</li>
          <li>06. 离不开你</li>
          <li>07. 情歌</li>
          <li>08. 相思风雨中</li>
          <li>09. 因为爱情</li>
          <div class="music actived">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </ul>
      </section>
    </div>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
      $(function () {
        var oAudio = document.getElementById("myaudio");
        var oSongArr = [
          "阿悄-如果说离别",
          "爱与诺言",
          "北京北京",
          "陈瑞-白狐",
          "感恩的心",
          "离不开你",
          "情歌",
          "相思风雨中",
          "因为爱情",
        ];
        var oNum = 0;
        var randomToggle = 0;
        var randomNum = 0;
        var $music = $("#content ul.songname .music");
        //--------------播放暂停---------------
        var $pause = $("#header .controls .pause");
        var $play = $("#header .controls .play");
        $pause.click(function () {
          oAudio.pause();
          $(this).animate({ marginTop: "-40px" });
        });
        $play.click(function () {
          oAudio.play();
          $(this).prev().animate({ marginTop: "0px" });
        });
        //-----------时间格式化----------------
        function timeFormat(time) {
          var oMinute = Math.floor(time / 60);
          var oSecond = Math.floor(time - oMinute * 60);
          var oStr =
            (oMinute > 9 ? oMinute : "0" + oMinute) +
            ":" +
            (oSecond > 9 ? oSecond : "0" + oSecond);
          return oStr;
        }
        //-----------进度条控制--------------------
        var $progressbtn = $("#header .progress .progress-bottom");
        var $bg = $("#header .progress .progress-bottom .bg-bar");
        var $bar = $("#header .progress .progress-bottom .bar");
        $progressbtn.click(function (e) {
          var $barleft = $bar.offset().left;
          var $barlength = e.pageX - $barleft;
          $bar.animate({ width: $barlength + "px" });
          oAudio.currentTime = ($barlength * oAudio.duration) / $bg.width();
        });
        //-----------当前播放时间--------------------
        timeProgress();
        function timeProgress() {
          var oTotal = oAudio.duration;
          var oCurrent = oAudio.currentTime;
          if (oTotal) {
            $("#header .progress p.time").html(
              timeFormat(oCurrent) + " | " + timeFormat(oTotal)
            );
          }
          var oWidth = (Math.floor(oCurrent) / Math.floor(oTotal)) * 320;
          $bar.width(oWidth);
          setTimeout(timeProgress, 1000);
        }
        //-----------下一首--------------------
        $("#header .next").click(function () {
          oNum++;
          if (oNum > 8) {
            oNum = 0;
          }
          playMusic(oNum);
        });
        //-----------上一首--------------------
        $("#header .prev").click(function () {
          oNum--;
          if (oNum < 0) {
            oNum = 8;
          }
          playMusic(oNum);
        });
        //-----------列表切歌--------------------
        var $li = $("#content ul.songname li");
        var $picli = $("#content ul.pic li");
        $li.click(function () {
          var index = $(this).index();
          oNum = index;
          playMusic(oNum);
        });
        //-----------播放歌曲--------------------
        function playMusic(num) {
          oAudio.src = "music/" + oSongArr[num] + ".mp3";
          oAudio.load();
          timeProgress();
          $("#header .progress p.name").html(oSongArr[num]);
          $li
            .eq(num)
            .addClass("active")
            .siblings(".active")
            .removeClass("active");
          $picli.eq(num).fadeIn(500).siblings().fadeOut(500);
          $music.css("top", ($li.eq(num).height() + 3) * num + "px");
          if ($pause.css("margin-top") != "0px") {
            $pause.animate({ marginTop: "0px" });
          }
        }
        //-----------单曲循环--------------------
        var $single = $("#header .mode .single");
        $single.click(function () {
          oAudio.loop = "loop";
          randomToggle = 0;
          $(this).addClass("selected").next().removeClass("selected");
        });
        //-----------随机播放--------------------
        var $random = $("#header .mode .random");
        $random.click(function () {
          $(this).addClass("selected").prev().removeClass("selected");
          oAudio.removeAttribute("loop");
          randomToggle = 1;
        });
        //-------------默认顺序播放----------------------
        oAudio.addEventListener("ended", function () {
          if (randomToggle == 0) {
            oNum++;
            if (oNum > 8) {
              oNum = 0;
            }
            playMusic(oNum);
          } else {
            randomNum = Math.floor(Math.random() * $li.length);
            oNum = randomNum;
            playMusic(randomNum);
          }
        });
        //-----------折叠歌曲列表--------------------
        $("#header .fold .close").click(function () {
          $("#content").slideUp();
          $(this).animate({ marginTop: "-30px" });
        });
        $("#header .fold .open").click(function () {
          $("#content").slideDown();
          $(this).prev().animate({ marginTop: "0px" });
        });
        //-----------音量控制--------------------
        var $min = $("#header .volume .min");
        var $max = $("#header .volume .max");
        var $volumebg = $("#header .volume .volume-bg");
        var $volumebar = $("#header .volume .volume-bar");
        var $volumecontrol = $("#header .volume .volume-control");
        oAudio.volume = 0.5;
        $min.click(function () {
          oAudio.volume = 0;
          $volumebar.animate({ width: "0px" });
        });
        $max.click(function () {
          oAudio.volume = 1;
          $volumebar.animate({ width: "100px" });
        });
        $volumecontrol.click(function (e) {
          var $volumebarleft = $volumebar.offset().left;
          var $volumelength = e.pageX - $volumebarleft;
          $volumebar.animate({ width: $volumelength + "px" });
          oAudio.volume = $volumelength / $volumebg.width();
        });
      });
    </script>
  </body>
</html>
